<template>
    <a-card :loading="loading">
      <search-bar :searchItems="searchItems" @search="searchHandle" :selectOptionDatas="selectOptionDatas" />
      <table-page
        :table-cols="tableCols"
        :table-datas="tableDatas"
        :operationBtns="operationBtns"
        @operationHandel="operationHandel"        
        :selectOptionDatas="selectOptionDatas"
      />
      <pagination
        :total="params.total"
        :limit="params.limit"
        :page="params.page"
        @pagination="paginationHandel"
      />
    </a-card>
  </template>
  <script>
  import SearchBar from "@/components/SearchBar";
  import TablePage from "@/components/TablePage";
  import Pagination from "@/components/Pagination";
  
  export default {
    components: {
      SearchBar,
      TablePage,
      Pagination,
    },
    data() {
      return {
        loading: false,
        searchItems: [
          { key: "userName", label: "用户账号" },
          { key: "status", label: "登录状态", type: "select" },
        ],
        tableCols: [
          { title: "用户账号", dataIndex: "userName" },
          { title: "登录IP地址", dataIndex: "ipaddr" },
          { title: "浏览器类型", dataIndex: "browser" },
          { title: "操作系统", dataIndex: "os" },
          { title: "登录状态", dataIndex: "status", type: "select" },
          { title: "提示消息", dataIndex: "msg" },
          { title: "访问时间", dataIndex: "loginTime" }
        ],
        operationBtns: [
          { key: "delete", label: "删除" }
        ],
        params: { total: 0, limit: 10, page: 0 },
        tableDatas: [],
        selectOptionDatas:{
            status: [ { label: "成功", value: 0 }, { label: "失败", value: 1 }],
        },
        formData: {},
        fromVisible: false,
      };
    },
    created() {
      this.initData();
    },
    methods: {
      initData() {
        this.$store.dispatch("sys-log/queryLogininforList", this.params).then((res) => {
          this.tableDatas = res.list;
          this.params.total = res.totalCount;
        });
      },
      searchHandle(params) {
        this.params = { ...this.params, ...params };
        this.initData();
      },
      operationHandel(row, event) {
        var vm=this;
        if (event === "delete") {
          vm.$confirm({
            title: "确定要删除此记录吗？",
            onOk() {
              vm.$store.dispatch("sys-log/deleteLogininfor", row.id).then(() => {
                vm.initData();
                vm.$message.success("删除成功！");
              });
            },
          });
        }
      },
      paginationHandel({ page, limit }) {
        this.params.page = page;
        this.params.limit = limit;
        this.initData();
      }
    },
  };
  </script>
  <style scoped>
  .ant-card {
    min-height: calc(100vh - 64px);
    margin: 24px 24px 0;
  }
  </style>